<template>
    <div class="remond">
        <router-link 
            to="/"
            class="items"
            v-for="(item,index) in RunRecordData" :key="index"
        >
            <div class="divs">
                <span class="span1">{{item.data}}</span>
                <span class="span2">{{item.time}}</span>
                <p class="p3">{{item.title}}</p>
                <span class="span3">时速：{{item.speed}}</span>
                <span class="span4">用时：{{item.useTime}}</span>
                <span class="span5">消耗：{{item.consume}}千卡</span>
            </div> 
        </router-link>
        <div class="zhanwei"></div>
    </div>
</template>
<script>
export default {
    name:'RunRecordList',
    data(){
        return{
            RunRecordData:[]
        }
    },
    mounted(){
        this.$axios.get(this.List_4_HOST)
        .then(res=>{
            console.log(res.data)
            this.RunRecordData=res.data;
        })
        .catch(error=>{
            console.log(error)
        })
    }
}
</script>
<style lang="less" scoped>
.remond{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    .divs{
        padding: 10px 0 10px 15px;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 10px;
        background-color: #fff;
        .span1,.span2{
            color:#171818;
            font-size: 14px;
            font-weight: 600;
        }
        .p3{
            color:#171818;
            font-size: 18px;
            font-weight: 700;
            margin-top: 20px;
            margin-bottom: 5px;
        }
        .span3,.span4,.span5{
            color:#171818;
            font-size: 14px;
            font-weight: 600;
            margin-right: 10px;
        }
    }
}   
</style>